<template>
  <div>
    <a-spin :spinning="spinning">
      <div ref="chartContainer" style="width: 100%; height: 70vh"></div>
    </a-spin>
  </div>
</template>
<script setup>
import * as echarts from "echarts";
import "echarts-gl";
import html2canvas from "html2canvas";
import { upFile } from "@/api/file/file.js"
import { markRaw } from 'vue';

const chartContainer = ref(null);
const spinning = ref(false);
const chart = ref();
const props = defineProps({
  echartsData: Object,
});
watch(
  () => props.echartsData,
  () => {
    //清空画板
    if (chart.value != undefined) {
      chart.value.clear();
      console.log("clear");
    }
    // console.log("echart", props.echartsData);
    renderChart(props.echartsData);
  }
);
const renderChart = (dataRows) => {
  spinning.value = true;
  const data = [];
  dataRows.forEach((res) => {
    //传入对应数据 （y ,x ,x ）
    data.push([res.depth, res.F_pull / 1000, res.F_push / 1000]);
  });
  const divElement = chartContainer.value;
  chart.value = markRaw(echarts.init(chartContainer.value));

  const option = ref({
    animation: false, //取消动画
    // 标题
    title: {
      text: "轴力预测曲线图",
    },
    dataZoom: {
      type: "inside",
      yAxisIndex: [0], // 设置缩放影响的 y 轴索引
      start: 0, // 缩放的起始位置（0%）
      end: 100, // 缩放的结束位置（100%）
    },
    grid: {
      right: '15%'
    },
    //图例
    legend: {
      data: ["上提轴力", "下放轴力"], // 设置图例的显示文本
      orient: "horizontal", // 图例水平显示
      right: 40, // 右边距离
      bottom: 1
    },
    // 工具箱
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    // 提示框
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
      },
      showContent: false,
    },
    yAxis: {
      type: "value",
      inverse: true,
      name: "井深(m)",

    },
    xAxis: {
      type: "value",
      name: "轴力(kN)",
      position: "top",
      // axisLabel: {
      //   formatter: function (value) {
      //     return value/1000;
      //   },
      // },
    },
    series: [
      {
        name: "上提轴力",
        type: "line",
        data: data,
        smooth: false, // 是否使用平滑曲线
        showSymbol: false, // 不显示数据点
        encode: {// 配置数据在系列中的映射关系(数组中对应位置)
          x: 1,
          y: 0,
        },
      },
      {
        name: "下放轴力",
        type: "line",
        data: data,
        smooth: false, // 是否使用平滑曲线
        showSymbol: false, // 不显示数据点
        encode: {
          x: 2,
          y: 0,
        },
      },
    ],
  });
  chart.value.setOption(option.value);
  spinning.value = false;
  canvaImg()
};
//截图
function canvaImg() {
  const formData = new FormData();
  html2canvas(chartContainer.value).then((canvas) => {
    const imageData = canvas.toDataURL("image/png");
    formData.append("chartType", "轴力图");
    formData.append("file", imageData);
    formData.append("schemeId", localStorage.getItem("schemeId"));
    upFile(formData).then((res) => {
      console.log("yes");
    });
  });
}
</script>
